<template>
  <div class="page-content">
    <top-header title="生产看板" :company="userInfo && userInfo.tenant_company || '木多鱼智造'" />

    <div class="main-content">
      <count-flop :data="countData" />

      <div class="block-top-bottom-content">
        <div class="half-board">
          <carouselBoard :title="purchase.title" :data="purchase.data" :columns="purchase.columns" :row-count="purchase.rows" />
        </div>
        <div class="half-board">
          <carouselBoard :title="progress.title" :data="progress.data" :columns="progress.columns" :row-count="progress.rows">
            <template v-slot:col-bill_no="row">
              <div class="row no-wrap items-center">
                <div class="q-pa-xs" style="width: 80px;">
                  <viewer :images="row.goods_image" class="flex">
                    <template #default="scope">
                      <div class="image-box-lg" v-for="img in scope.images" :key="img.thumb">
                        <img class="fit-thumb" :src="img.image" :data-src="img.image" />
                      </div>
                    </template>
                  </viewer>
                </div>

                <div class="q-pa-xs" style="flex: 1;">
                  <div class="row">
                    <div class="col-7 ellipsis">生产单号：{{ row.bill_no }}</div>
                    <div class="col-5 ellipsis">合同编号：{{ row.contract_no }}</div>
                  </div>
                  <div class="row">
                    <div class="col-7 ellipsis">生产产品：{{ row.goods_name_no }}</div>
                    <div class="col-5 ellipsis">生产数量：{{ row.amount }} {{ row.goods_unit }}</div>
                  </div>
                  <div class="row">
                    <div class="col-7">截止日期：{{ row.required_date }}</div>
                    <div class="col-5 row items-center">
                      <div>生产进度：</div>
                      <div style="width: 120px;">
                        <q-linear-progress stripe size="22px" :value="row.progress_rate / 100" color="blue" dark>
                          <div class="absolute-full flex flex-center">
                            <q-badge color="white" text-color="blue" :label="~~(row.progress_rate)+'%'" />
                          </div>
                        </q-linear-progress>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <template v-slot:col-progress_rate="row">
              <div class="step-container">
                <flowChart :steps="flowData(row)" dark />
              </div>
            </template>
          </carouselBoard>
        </div>
      </div>
    </div>
    <bottom-border />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useMeta } from 'quasar';
import { useStore } from 'stores/store';
import { mapState, mapActions } from 'pinia';

import topHeader from './components/default/topHeader.vue';
import bottomBorder from './components/default/bottomBorder.vue';
import countFlop from './components/default/countFlop.vue';
import carouselBoard from './components/default/carouselBoard.vue';
import flowChart from 'components/flowChart.vue';

export default defineComponent({
  setup (props, context) {
    const $store = useStore();
    useMeta({
      // 设置文件标题
      title: `${$store.siteConfig.appName} - 木多鱼系列`,
      meta: {
        description: {
          name: 'description',
          content: $store.siteConfig.description || $store.siteConfig.subTitle
        }
      }
    });
  },
  inject: ['setTheme', 'getThemeName'],
  components: {
    topHeader,
    bottomBorder,
    countFlop,
    carouselBoard,
    flowChart
  },
  data () {
    return {
      flopData: {
        order_total: 0,
        order_overdue: 0,
        mrp_total: 0,
        mrp_overdue: 0,
        progress_total: 0,
        progress_overdue: 0,
        purchase_total: 0,
        purchase_overdue: 0
      },
      purchase: {
        title: '采购进度',
        data: [],
        columns: [
          { name: 'bill_no', label: '采购单号', width: 160, align: 'center' },
          { name: 'supplier_name', label: '供应商', width: 160, align: 'center' },
          { name: 'material_name_model', label: '物料', align: 'left' },
          { name: 'amount', label: '数量', width: 140, align: 'right', format: (val, row) => `${val} ${row.material_unit}` },
          // { name: 'material_unit', label: '单位', width: 80, align: 'center' },
          { name: 'required_date', label: '要求到货时间', width: 160, align: 'center', class: row => row.required_time < Date.now() / 1000 ? 'text-red' : '' },
          // { name: 'remark', label: '备注', width: 160, align: 'center' },
          { name: 'order_bill_no', label: '生产单号', width: 160, align: 'center' },
          { name: 'contract_no', label: '合同编号', width: 200, align: 'center' },
          { name: 'goods_name_no', label: '产品', width: 280, align: 'center' }
        ],
        rows: 6
      },
      progress: {
        title: '生产进度',
        data: [],
        columns: [
          { name: 'bill_no', label: '生产单信息', align: 'left' },
          { name: 'progress_rate', label: '生产进度', width: 1100, align: 'left' }
        ],
        rows: 2
      },
      theme: 'default'
    }
  },
  created () {
    this.setTheme(this.theme);
  },
  mounted () {
    this.freshData();
  },
  methods: {
    freshData () {
      this.$axios.post('/c2/tenant/dashboard/tenantAbstract').then(({ data }) => {
        this.flopData = data.flop;
      });

      this.$axios.post('/c2/tenant/dashboard/mrpPurchase').then(({ data }) => {
        this.purchase.data = data.data;
      });

      this.$axios.post('/c2/tenant/dashboard/produceProgress').then(({ data }) => {
        this.progress.data = data.data;
      });
    },
    flowData (data) {
      const steps = [];
      const statusColor = {
        none: 'bg-grey-6',
        doing: 'bg-green-8',
        done: 'bg-blue-8'
      };

      for (const row of data.t_produce_progresses) {
        const step = {
          title: {
            label: row.process_name,
            class: statusColor[row.status]
          },
          subtitle: {
            label: row.status_label
          },
          description: {
            label: row.required_date,
            class: row.status !== 'done' && row.required < Date.now() / 1000 ? 'text-negative' : ''
          },
          data: row
        };

        steps.push(step);
      }

      return steps;
    }
  },
  computed: {
    ...mapState(useStore, ['siteInfo', 'userInfo']),
    countData () {
      return {
        order_total: {
          title: '生产中的生产单',
          unit: '笔',
          number: this.flopData.order_total || 0,
          style: {
            color: '#4d99fc',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: ''
        },
        order_overdue: {
          title: '超期的生产单',
          unit: '笔',
          number: this.flopData.order_overdue || 0,
          style: {
            color: '#ff0000',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: `超期占比${this.flopData.order_total > 0 ? (this.flopData.order_overdue / this.flopData.order_total * 100) : 0}%`
        },
        mrp_total: {
          title: '未采购的物料',
          unit: '笔',
          number: this.flopData.mrp_total || 0,
          style: {
            color: '#90f6ee',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: ''
        },
        mrp_overdue: {
          title: '超期未采购的物料',
          unit: '笔',
          number: this.flopData.mrp_overdue || 0,
          style: {
            color: '#f46827',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: `超期占比${this.flopData.mrp_total > 0 ? (this.flopData.mrp_overdue / this.flopData.mrp_total * 100) : 0}%`
        },
        progress_total: {
          title: '未完成的工序',
          unit: '笔',
          number: this.flopData.progress_total || 0,
          style: {
            color: '#9eec9f',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: ''
        },
        progress_overdue: {
          title: '超期未完成的工序',
          unit: '笔',
          number: this.flopData.progress_overdue || 0,
          style: {
            color: '#d87f7c',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: `超期占比${this.flopData.progress_total > 0 ? (this.flopData.progress_overdue / this.flopData.progress_total * 100) : 0}%`
        },
        purchase_total: {
          title: '未到货的采购',
          unit: '笔',
          number: this.flopData.purchase_total || 0,
          style: {
            color: '#54b9d1',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: ''
        },
        purchase_overdue: {
          title: '超期未到货的采购',
          unit: '笔',
          number: this.flopData.purchase_overdue || 0,
          style: {
            color: '#eee15f',
            'font-weight': 'bold',
            'font-size': '60px'
          },
          subtitle: `超期占比${this.flopData.purchase_total > 0 ? (this.flopData.purchase_overdue / this.flopData.purchase_total * 100) : 0}%`
        }
      };
    }
  }
});
</script>

<style lang="scss">
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 20px 10px 10px 10px;
  }

  .left-board {
    width: 70%;
    height: 100%;
    margin-right: 1%;
  }

  .right-board {
    width: 29%;
    height: 100%;
  }

  .half-board {
    width: 100%;
    height: 50%;
    padding: 10px 0;
  }

  .bottom-footer {
    text-align: center;
    padding: 5px;
  }
}

</style>
